{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="22"/>
{% end block %}

{% block main %}
<div class="container">
    <ol class="breadcrumb">
        <li class="active">镜像信息</li>
    </ol>
    <div class="row container">
        <button class="btn btn-primary" data-bind="click:$root.newImage">添加新镜像</button>
    </div>
    <!-- 查询结果开始 -->
    <table class="table table-striped table-bordered">
        <caption>
            <h4><strong>所有镜像</strong></h4>
        </caption>
        <thead>
            <tr>
                <th style="min-width: 50px">编号</th>
                <th style="min-width: 180px">镜像名称</th>
                <th style="min-width: 90px">大小(MB)</th>
                <th style="min-width: 140px">创建时间</th>
                <th>描述</th>
                <th style="min-width: 50px">状态</th>
                <th style="min-width: 100px">操作</th>
            </tr>
        </thead>
        <tbody data-bind="foreach:images">
            <tr>
                <td data-bind="text:imageid"></td>
                <td data-bind="text:imagename"></td>
                <td data-bind="text:size"></td>
                <td data-bind="text:createdtime"></td>
                <td data-bind="text:description"></td>
                <td data-bind="text: status()=='1' ? '活动' : '禁用'"></td>
                <td>
                    <button type="button" class="btn btn-warning btn-xs" data-bind="click:$root.editImage">修改</button>
                    <button type="button" class="btn btn-danger btn-xs" data-bind="click:$root.deleteImage">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- 修改对话框开始 -->
<div id="dlgEdit" class="modal fade" data-bind="with:selectedImage">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">镜像描述信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-2">镜像名称</label>
                        <div class="col-md-10 form-control-static">
                            <label data-bind="text:imagename"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">描述信息</label>
                        <div class="col-md-10">
                            <textarea class="form-control" rows="5" data-bind="value:description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="control-label col-md-2">状态</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
                                <input type="radio" name="status" value="1" data-bind="checked:status"/>活动
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="status" value="0" data-bind="checked:status"/>禁用
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2">
                            <button type="button" class="btn btn-default" data-bind="click:$root.updateImage">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 修改对话框结束 -->

<!-- 添加对话框开始 -->
<div id="dlgNew" class="modal fade" data-bind="with:selectedImage">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">镜像描述信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-2">镜像名称</label>
                        <div class="col-md-10">
                            <input class="form-control" data-bind="value:imagename"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">镜像大小</label>
                        <div class="col-md-10">
                            <input class="form-control" data-bind="value:size"/>MB
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2">描述信息</label>
                        <div class="col-md-10">
                            <textarea class="form-control" rows="5" data-bind="value:description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="control-label col-md-2">状态</label>
                        <div class="col-md-10">
                            <label class="radio-inline">
                                <input type="radio" name="status" value="1" data-bind="checked:status"/>活动
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="status" value="0" data-bind="checked:status"/>禁用
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2">
                            <button type="button" class="btn btn-default" data-bind="click:$root.updateImage">更新</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 添加对话框结束 -->
{% end block %}


{% block script %}
<script type="text/javascript">
    function ViewModel(){
        var self = this;
        self.images = ko.observableArray();
        self.selectedImage = ko.observable();

        self.editImage = function(){
            self.selectedImage(this);
            $("#dlgEdit").modal({ 'backdrop': 'static' });
        };

        self.newImage = function(){
            self.selectedImage(new Image())
            $("#dlgNew").modal({ 'backdrop': 'static' });
        };

        self.deleteImage = function(){
            var imageid = this.imageid;
            bootbox.confirm('确实要删除镜像【' + this.imagename + '】吗？', function(choice){
                if (choice){
                    var queryData = {
                        'operation' : 'delete_image',
                        'operand' : {
                            'imageid' : imageid
                        }
                    };
                    $.ajax({
                        url : '/docker_images',
                        type : 'post',
                        data : JSON.stringify(queryData),
                        dataType : 'json',
                        success : function(jsonResult){
                            if(jsonResult.success){
                                bootbox.alert('操作成功！');
                                loadImages();
                            } else{
                                bootbox.alert(jsonResult.message);
                            }
                        }
                    });
                }
            });
        }

        self.updateImage = function(){
            operation = this.imageid ? 'update_image' : 'new_image';

            var queryData = {
                'operation' : operation,
                'operand' : {
                    'imageid' : this.imageid,
                    'imagename' : this.imagename,
                    'size' : this.size,
                    'description' : this.description(),
                    'status' : this.status()
                }
            };
            $.ajax({
                url : '/docker_images',
                type : 'post',
                data : JSON.stringify(queryData),
                dataType : 'json',
                success : function(jsonResult){
                    if(jsonResult.success){
                        bootbox.alert('操作成功！');
                        if (operation == 'update_image'){
                            $("#dlgEdit").modal('hide');
                        } else{
                            $("#dlgNew").modal('hide');
                            loadImages();
                        } 
                    } else{
                        bootbox.alert(jsonResult.message);
                    }
                }
            });
        };        
    }

    function Image(imageid, imagename, size, createdtime, description, status){
        var self = this;
        self.imageid = imageid;
        self.imagename = imagename;
        self.size = size;
        self.createdtime = createdtime;
        self.description = ko.observable(description);
        self.status = ko.observable(status ? '1' : '0');
    }

    function loadImages(){
        var querydata = {
            'operation' : 'get_images_from_db'
        };
        $.ajax({
            url : '/docker_images',
            type : 'post',
            data : JSON.stringify(querydata),
            dataType : 'json',
            success : function(jsonResult){
                temp = [];
                for(var i=0;i<jsonResult.data.length;i++){
                    var image = jsonResult.data[i];
                    temp.push(new Image(image.imageid, image.imagename, image.size, image.createdtime, image.description, image.status));
                }
                viewModel.images(temp);
            }
        });
    }

    var viewModel = new ViewModel();

    $(function(){
        loadImages();
        ko.applyBindings(viewModel);
    });
</script>
{% end block %}
